<template>
<div>
  <city-header></city-header>
  <city-search :cities="cities"></city-search>
  <city-list :cities="cities" :hot="hotCities" :letter="letters"></city-list>
  <city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
</div>
</template>
<script>
  import axios from 'axios'
  import CityHeader from './components/Header'
  import CitySearch from './components/Search'
  import CityList   from './components/List'
  import CityAlphabet  from './components/Alphabet'
  export default {
    name:'City',
    components:{
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
    },
    data () {
      return {
        cities:{},
        hotCities:[],
        letters:''
      }
    },
    methods:{
      getCityInfo () {
        axios.get('/api/city.json')
          .then (this.getCityInfoSucc)
          .catch (error =>{
            alert('网络错误')
          })
      },
      getCityInfoSucc (res) {
        console.log(res)
        res=res.data
        if(res.ret && res.data){
          const data=res.data
          this.cities=data.cities
          this.hotCities=data.hotCities
        }
      },
      handleLetterChange (letter) { //父组件接受传进来的letter属性
        this.letters=letter
      }
    },
    mounted () {
      this.getCityInfo()
    }
  }


</script>
<style lang="stylus" scoped>

</style>
